<template>
    <div class="selector-coupon" v-if="show_show">

        <!--S内容-->
        <div id="coupon" class="louie-selector" :class="selector_class">

            <!--S标题-->
            <h2>
                <span>卡券管理</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="toggle(false)"
                        >
                </i>
            </h2>
            <!--E标题-->

            <!--S添加卡券-->
            <div id="add-button" @click="showEditCoupon">
                <cube-button>创建卡券</cube-button>
            </div>
            <!--E添加卡券-->

            <!--S卡券类型选择-->
            <select-type
                    :index="types.index"
                    @loaded="selectTypeLoaded"
                    @change="selectTypeChange"
                >
            </select-type>
            <!--E卡券类型选择-->

            <!--S卡券列表-->
            <div id="list">

                <cube-slide
                        ref="listSlide"
                        :data="types.values"
                        :autoPlay="false"
                        :showDots="false"
                        :initialIndex="types.index"
                        @scroll-end="selectTypeScrollEnd"
                >

                    <cube-slide-item
                            class="list"
                            v-for="(item, index) in types.values"
                            :key="index"
                    >

                        <cube-scroll
                                v-show="list[index].data.length > 0"
                                ref="listScroll"
                                class="list-scroll"
                                :options="list[index].scroll_option"
                                @pulling-up="upLoad"
                        >

                            <single-coupon
                                    class="list-coupon"
                                    v-for="(list_item,list_index) in list[index].data"
                                    :key="list_item.type + list_item.id"
                                    :data="list_item"
                                    @click.native="clickCoupon(index,list_index)"
                            >
                                <template v-slot:status v-if="list_item.status !== 1">
                                    <i v-if="list_item.status === 8" class="iconfont icon-yiguoqi"></i>
                                    <i v-if="list_item.status === 2" class="iconfont icon-shenhe01"></i>
                                    <i v-if="list_item.status === 3" class="iconfont icon-weitongguo"></i>
                                </template>
                            </single-coupon>

                        </cube-scroll>
                        <empty v-show="list[index].data.length <= 0">暂无卡券</empty>

                    </cube-slide-item>

                </cube-slide>

            </div>
            <!--E卡券列表-->

        </div>
        <!--E内容-->

        <!--S添加修改卡券弹窗-->
        <edit :show="edit.show"
              :coupon_id="edit.coupon_id"
              @close="edit.show = false"
              @createSuccess = "createSuccess"
              @editSuccess = "editSuccess"
        >
        </edit>
        <!--E添加修改卡券弹窗-->

        <!--S卡券详情弹窗-->
        <detail :show="detail.show"
                :coupon_id="detail.coupon_id"
                @close="detail.show = false"
        >
        </detail>
        <!--E卡券详情弹窗-->

    </div>
</template>

<script>
import Edit from "./components/edit"
import Detail from "./components/detail"
import SelectType from "./components/select-type"
import Coupon from "../../components/coupon/Coupon"
import Empty from "@c/empty"
export default {
    name: "coupon",
    data() {
        return {
            // 显示状态
            show_show: false,
            // 素材库class
            selector_class: 'close',
            // 编辑卡券组件属性
            edit: {
                show: false,
                coupon_id: ""
            },
            // 卡券详情组件属性
            detail: {
                show: false,
                coupon_id: ""
            },
            // 卡券类型列表
            types: {
                index: 0,
                values: []
            },
            // 列表
            list: [],
            // 点击操作卡券,下标，0卡券类型下标，1卡券列表下标
            handle_index: [0,0]
        }
    },
    props: {
        is_show: {
            type: Number || Boolean
        },
        /**
         * 是否为选择器
         */
        select: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Edit,
        Detail,
        SelectType,
        SingleCoupon: Coupon,
        Empty
    },
    watch: {
        // 组件显示状态
        is_show() {
            this.toggle(true)
        },
        "types.values"(value) {
            for(let i=0;i<value.length;i++) {
                this.list.push({
                    // 列表是否正在加载中
                    loading: false,
                    // 第一次是否已经加载
                    first: false,
                    limit: [0, 10],
                    data: [],
                    // 滚动条配置
                    scroll_option: {
                        scrollbar:true,
                        pullUpLoad:{
                            txt:{
                                more:"上拉加载",
                                noMore:"----我也是有底线的----"
                            }
                        },
                        click: false
                    }
                })
            }
            this.list[0].first = true
            this.getList()
        }
    },
    mounted() {
        this.toggle(true)
    },
    methods: {
        /**
         * 显示隐藏本组件
         */
        toggle(is_show) {
            if(is_show) {
                this.show_show = true
                setTimeout(() => {
                    this.selector_class = 'show'
                },100)
            } else {
                this.selector_class = 'close'
                setTimeout(() => {
                    this.show_show = false
                },200)
            }
        },

        // Run
        /**
         * 获取列表
         */
        getList(){
            let _index = this.types.index
            if(this.list[_index].loading) return true
            this.list[_index].loading = true
            this.$get("coupon/getUserAll",{
                limit: this.list[_index].limit,
                type: this.types.values[_index]
            })
                .then((res) => {
                    console.log(res)
                    this.list[_index].loading = false
                    let {code, data} = res.data
                    if(code === 0) {
                        this.list[_index].data.push(...data)
                        this.list[_index].limit[0] += this.list[_index].limit[1]
                        if(this.list[_index].data.length < this.list[_index].limit[1]){
                            this.list[_index].scroll_option.pullUpLoad = false
                            this.$refs.listScroll[_index].refresh()
                        } else {
                            this.$refs.listScroll[_index].forceUpdate(true,false)
                        }
                    } else {
                        if(this.list[_index].data.length > this.list[_index].limit[1]){
                            this.$refs.listScroll[_index].forceUpdate(true,true)
                        } else {
                            this.list[_index].scroll_option.pullUpLoad = false
                            this.$refs.listScroll[_index].refresh()
                        }
                    }
                })
        },

        // Handle
        /**
         * 列表上拉加载
         */
        upLoad() {
            this.getList()
        },
        /**
         * 显示新增编辑卡券区域
         */
        showEditCoupon() {
            this.edit.show = true
            this.edit.coupon_id = ''
        },
        /**
         * 卡券组件加载完成
         */
        selectTypeLoaded(value) {
            this.types.values = value
        },
        /**
         * 选取卡券类型
         */
        selectTypeChange(value) {
            this.types.index = value
        },
        /**
         * 选择卡券类型左右滚动结束
         * @param index
         */
        selectTypeScrollEnd(index) {
            this.types.index = index
            if(!this.list[index].first) {
                this.list[index].first = true
                this.getList()
            }
        },
        /**
         * 卡券创建成功
         */
        createSuccess(coupon_id) {
            this.edit.coupon_id = coupon_id
            this.$get("coupon/get",{
                coupon_id: this.edit.coupon_id
            })
                .then((res) => {
                    let { code, data } = res.data
                    if(code === 0) {
                        this.createPush(data)
                    }
                })
        },
        /**
         * 卡券创建成功插入
         */
        createPush(data) {
            for(let i=0;i<this.types.values.length;i++){
                if(this.types.values[i] === data.type) {
                    if(this.list[i].first) {
                        this.list[i].data.splice(0,0,data)
                        this.handle_index = [i,0]
                    }
                    break
                }
            }
        },
        /**
         * 卡券修改成功
         */
        editSuccess() {
            this.$get("coupon/get",{
                coupon_id: this.edit.coupon_id
            })
                .then((res) => {
                    let { code, data } = res.data
                    if(code === 0) {
                        this.editPush(data)
                    }
                })
        },
        editPush(data) {
            let _index = this.handle_index[0]
            let list_index = this.handle_index[1]
            if(this.list[_index].first) {
                this.list[_index].data.splice(list_index,1,data)
            }
        },
        /**
         * 点击卡券
         */
        clickCoupon(types_index,index) {
            this.handle_index = [types_index,index]
            let list_data = this.list[types_index].data[index]
            let sheet_data = [
                {
                    content: '卡券详情',
                    value: 'detail'
                },
                {
                    content: '修改',
                    value: 'edit'
                },
                {
                    content: `<span style="color: red;">删除</span>`,
                    value: 'delete'
                }
            ];
            if(this.select && list_data.status === 1){
                sheet_data.unshift({
                    content: '选择',
                    value: 'select'
                });
            }
            this.$createActionSheet({
                title: '操作',
                data: sheet_data,
                zIndex: 1300,
                onSelect:(res)=>{
                    switch (res.value) {
                        case 'detail':
                            this.showDetail()
                            break;
                        case 'edit':
                            this.update()
                            break;
                        case 'delete':
                            this.delete()
                            break;
                        case 'select':
                            this.confirmSelect()
                            break;
                    }
                }
            }).show()
        },
        /**
         * 修改卡券
         */
        update() {
            let _index = this.handle_index[0]
            let list_index = this.handle_index[1]
            let data = this.list[_index].data[list_index]
            this.edit.coupon_id = data.id
            this.edit.show = true
        },
        /**
         * 删除卡券
         */
        delete() {
            let _index = this.handle_index[0]
            let list_index = this.handle_index[1]
            this.$post("coupon/del",{
                coupon_id: this.list[_index].data[list_index].id
            })
                .then((res) => {
                    if(res.data.code === 0) {
                        this.list[_index].data.splice(list_index,1)
                        this.upLoad()
                    } else {
                        console.log('删除失败')
                    }
                });
        },
        /**
         * 查看卡券详情
         */
        showDetail(){
            let _index = this.handle_index[0]
            let list_index = this.handle_index[1]
            let data = this.list[_index].data[list_index]
            this.detail.coupon_id = data.id
            this.detail.show = true
        },
        /**
         * 确认选择卡券
         */
        confirmSelect() {
            let _index = this.handle_index[0]
            let list_index = this.handle_index[1]
            let data = this.list[_index].data[list_index]
            this.$emit("confirm",data.id)
            this.toggle(false)
        }
    }
}
</script>

<style scoped lang="less" src="./coupon.less"></style>
